// import { Tabs, WhiteSpace } from 'antd-mobile';
// import {LeftnavWrapper} from './styledLeftnav'
// import React,{useCallback,useState} from 'react'
// function Leftnav(props) {

//   const renderContent = tab =>
//     (<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
//       <p>Content of {tab.title}</p>
//     </div>);


//     const tabs = [
//       { title: '推荐' },
//       { title: '品牌' },
//       { title: '主题' },
//       { title: '系列' },
//       { title: '潮鞋' },
//       { title: '潮服' },
//       { title: '箱包' },
//       { title: '美妆' },
//       { title: '配饰' },
//       { title: '手表' },
//       { title: '数码' },
//       { title: '女装' },
//       { title: '潮玩' },
//       { title: '运动' },
//       { title: '家居' },
//       { title: '家电' },
//       { title: '汽车' },
//       { title: '艺术' },
//     ];
//     const divStyle = {
//       border: "none"
//     };
//     const [active,setActive]=useState('#F5F5F9')
//     const handleClick=useCallback(
//           active=>{
//             return()=>{
//               setActive(active)
//             }
//           }
//     )
//     return (
//       <LeftnavWrapper>
//         <WhiteSpace />
//         <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={10} />}
//         tabBarPosition='left'
//         tabBarUnderlineStyle={divStyle}
//         tabBarActiveTextColor='#60C2C8'
//         tabBarInactiveTextColor='black'
//         tabBarBackgroundColor='#F5F5F9'
//         onTabClick={handleClick('white')}
//         distanceToChangeTab='1'
//         swipeable={false}
//         animated={false}
//         >
//           {renderContent}
//         </Tabs>
//         <WhiteSpace />
//       </LeftnavWrapper>
//     )

//   }



// export default Leftnav













import React,{Children,useEffect,useState,cloneElement,useCallback} from 'react'
import {LeftnavWrapper,LeftnavItemWrapper,LeftWrapper} from './styledLeftnav'
import {Switch,Route,NavLink} from 'react-router-dom'
import LeftnavItem from './LeftnavItem'
 function Leftnav({children,textColor,innerBg,activeInnerBg}) {
    // console.log(textColor);
    // console.log(Children);
    const [currentIndex,setCurrentIndex]=useState(0)

    const handleClick=useCallback(
      index => {
        return()=>{
          setCurrentIndex(index)
        }
      },
    )
    return (
        <LeftnavWrapper>
            <div className='box'>
                <div className='left'>
                <LeftWrapper
                innerBg={innerBg}
                activeInnerBg={activeInnerBg}
                >
                {
                  Children.map(children,(children,index)=>{
                    // console.log(children);
                    return cloneElement(children,{
                      index,
                      currentIndex,
                      cb:handleClick,
                      textColor,
                      innerBg,
                      activeInnerBg
                    })
                  })
                  }
                  </LeftWrapper>
                </div>
                {/* <div className='right'> */}
                <div className='right'>
                 {children[currentIndex].props.children}

                </div>
                {/* </div> */}
            </div>
        </LeftnavWrapper>
    )
}
Leftnav.Item=LeftnavItem
export default Leftnav

